<template>
  <div>
    <el-button @click="exportBpmnFile">导出bpmn文件</el-button>
    <br>
    <div id="bpmnEditorContainer" style="width: 100%;height: 800px" ref="canvas">

    </div>
  </div>
</template>
<script>

import BpmnModeler from "bpmn-js/lib/Modeler";
// import translateModule from 'diagram-js/lib/i18n/translate';
/**
 * 属性编辑面板参考：https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel
 * yarn add  bpmn-js-properties-panel @bpmn-io/properties-panel
 * */

// import sdf from '@/bpmn_file/example.bpmn'
import Axios from 'axios'
import {BpmnPropertiesPanelModule, BpmnPropertiesProviderModule} from 'bpmn-js-properties-panel'

export default {
  name: "bpmnEditor",
  data() {
    return {
      bpmnModeler: ''
    }
  },
  mounted() {
    this.showBpmnEditor()
  },
  methods: {

    show2() {

      // 获取到属性ref为“content”的dom节点

      const canvas = this.$refs.canvas; // 获取到属性ref为“canvas”的dom节点

      // 建模，官方文档这里讲的很详细
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        // 添加控制板
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        /* additionalModules: [
           translateModule,
           BpmnPropertiesProviderModule, // 左边工具栏以及节点
           BpmnPropertiesPanelModule, // 右边的工具栏
         ],*/
        /* moddleExtensions: {
           camunda: camundaModdleDescriptor,
           // activiti:activitiDescriptor
         }*/
      })

      this.bpmnModeler.importXML(resp.data);
    },

    showBpmnEditor() {
// 获取画布 element
      const canvas = this.$refs.canvas;

      this.bpmnModeler = new BpmnModeler({
        // container: canvas,//'#bpmnEditorContainer',
        // keyboard: {
        //   bindTo: window
        // },
        additionalModules: [
          BpmnPropertiesPanelModule,
          BpmnPropertiesProviderModule
        ]
      });

// attach it to some element
      const diagramUrl = 'http://localhost:50000/export (1).bpmn';//https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';

      let a =
      Axios.get(diagramUrl).then(resp => {
        this.bpmnModeler.attachTo('#bpmnEditorContainer');
        this.bpmnModeler.keyboardBindings = window

        return this.bpmnModeler.importXML(resp.data);
      }).then(({warnings}) => {
        // access modeler components

        var canvas = this.bpmnModeler.get('canvas');
        var overlays = this.bpmnModeler.get('overlays');


        // zoom to fit full viewport
        canvas.zoom('fit-viewport');

        // attach an overlay to a node
        overlays.add('SCAN_OK', 'note', {
          position: {
            bottom: 0,
            right: 0
          },
          html: '<div class="diagram-note">Mixed up the labels?</div>'
        });

        // add marker
        canvas.addMarker('SCAN_OK', 'needs-discussion');
      })
// detach the panel
//       this.viewer.detach();


    },
    /**
     * 导出 bpmn 文件
     * @returns {Promise<void>}
     */
    async exportBpmnFile() {
      const result = await this.bpmnModeler.saveXML({format: true});
      this.downloadByBlob('export.bpmn',result.xml)

    },
    //通过FileReader转化为base64字符串下载
    downloadByBlob(fileName, content) {
      let blob = new Blob([content], {
        type: "text/plain;charset=utf-8"
      });
      let reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = function (e) {
        let a = document.createElement('a');
        a.download = fileName;
        a.href = e.target.result;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    }
  },
}
</script>

<style scoped>

</style>
